<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="plugins/layui/css/layui.css">

    <script src="plugins/jquery/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="plugins/layui/layui.js"></script>

    <!-- Font Awesome -->
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">

    <style>
        .demoInput{
            outline-style: none ;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 12px ;
            width: 300px;
            font-size: 14px;
            font-weight: 300;
            font-family: "Microsoft soft";
        }
        .demoInput:focus{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }

    </style>
</head>
<body>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel1">预定信息</h4>
            </div>
            <div class="modal-body">

                <table class="layui-hide" id="test2" lay-filter="test" ></table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>



<!--    <button class="btn btn-primary btn-lg">添加服务预定</button>-->
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        添加服务预定
    </button>

    <button class="btn btn-primary btn-lg"  id="selectydxx">查看预定单信息</button>

    <br>
    <br>
<div style="margin-left: 40px">
            <span style="color: black; font-size: 16px;" >预定名称：</span>

    <input type="text" id="ssinput" class="demoInput" placeholder="输入服务名称"/>
    &nbsp; &nbsp; &nbsp; &nbsp;

    <button class="btn btn-primary btn-lg" id="ss">搜索</button>
    <button class="btn btn-primary btn-lg" id="ssqb">搜索全部</button>
</div>
    <br>
    <br>
<!--        <div style="text-align: center" >-->
        <table class="layui-hide" id="test" lay-filter="test" ></table>
<!--        </div>-->
<!--</center>-->
<!-- 添加模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    <center>添加服务预定</center>
                </h4>
            </div>
            <div class="modal-body">
                <div class="form-group has-feedback">
                    <label> 服务名称</label>
                    <input class="form-control"  placeholder="服务名称" id="fwmc">
                </div>
                <div class="form-group has-feedback">
                    <label>小区名称</label>
                    <div>
                    <select class="form-select"  aria-label="Default select example" id="xqmc">
                    </select>
                    </div>
<!--                    <input class="form-control"  placeholder="小区名称" id="xqmc">-->
                </div>
                <div class="form-group has-feedback">
                    <label> 服务类容数量</label>
                    <input class="form-control"  placeholder="服务类容数量" id="fwsl">
                </div>
                <div class="form-group has-feedback">
                    <label> 开始时间</label>
                    <input class="form-control"  placeholder="开始时间" id="kssj">
                </div>
                <div class="form-group has-feedback">
                    <label> 结束时间</label>
                    <input class="form-control"  placeholder="结束时间" id="jssj">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="addbut">
                    添加
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--修改模态框-->
<div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="xgmyModalLabel">
                    <center>修改服务信息</center>
                </h4>
            </div>
            <div class="modal-body">
                <div class="form-group has-feedback">
                    <label> 服务类容数量</label>
                    <input class="form-control"  placeholder="服务类容数量" id="xgfwsl">
                </div>
                <div class="form-group has-feedback">
                    <label> 开始时间</label>
                    <input class="form-control"  placeholder="开始时间" id="xgkssj">
                </div>
                <div class="form-group has-feedback">
                    <label> 结束时间</label>
                    <input class="form-control"  placeholder="结束时间" id="xgjssj">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="xgaddbut">
                    修改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script type="text/html" id="barDemo">


    <button lay-event="xg" class="btn btn-info " data-toggle="modal" data-target="#myModals" style="margin-top:-5px"> <span class="glyphicon glyphicon-pencil"></span> </button>
        <button lay-event="sc" class="btn btn-warning" style="margin-top:-5px"><span class="glyphicon glyphicon-trash" ></span> </button>

</script>



<script>

    /**
     * 刷新方法
     */
    function ff(){
        window.location.href="servicebook.html"
    }


    /**
     * 查看预定单
     */
    $("#selectydxx").on("click",function (){
        $ ('#myModal1').modal ('show');
        layui.use('table', function () {
            var table = layui.table;
            let datas = []

            function getAllRoles() {
                $.ajax({
                    url: "ckyyxx",
                    type: "post",
                    success: function (resp) {
                        datas = resp
                        console.log(resp)

                    }
                })

                setTimeout(function () {
                    table.render({
                        elem: '#test2'
                        // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        , cols: [[ //表头
                            {field: 'xxname', title: '预约名称'}
                            , {field: 'yyname',height:60, title: '预约人姓名'}

                        ]]
                        , data: datas
                        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                            layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                            , groups: 3 //只显示 1 个连续页码
                            , first: false //不显示首页
                            , last: false //不显示尾页
                            , limit: 4
                        }
                        , height: '250'
                    });
                }, 100)

            }

            setTimeout(function () {
                //延迟加载
                getAllRoles()
                // window.location.href="servicebook.html"
            }, 100);
        });
    })




    /**
     * 获取小区名称，赋值给select
     */
$.ajax({
    url:"getxqmc",
    type:"post",
    success:function(data){
        let se=$("#xqmc")
        for(i=0;i<data.length;i++){
            let op=document.createElement("option")
            op.innerHTML=data[i]
            se.append(op)
        }
        console.log(data);
    }

})



    $("#addbut").on("click", function(){
    let fwmc=$("#fwmc").val();
    let xqmc=$("#xqmc").val();
    let fwsl=$("#fwsl").val();
    let kssj=$("#kssj").val();
    let jssj=$("#jssj").val();

    $.ajax({
        url: "getadd",
        type: "post",
        data:{
            "fwmc":fwmc,"xqmc":xqmc,"fwsl":fwsl,"kssj":kssj,"jssj":jssj
        },
        success: function(data){
            if (data){
                layer.msg('添加成功', {icon: 6});
                setTimeout("ff()","1100");

            }else {
                layer.msg('添加失败', {icon: 2});
                setTimeout("ff()","1100");
            }
        }
    })
    $ ('#myModal').modal ('hide');


})
layui.use('table', function () {
    var table = layui.table;
    let datas = []

    function getAllRoles() {
        $.ajax({
            url: "getfwxx",
            type: "post",
            success: function (resp) {
                datas = resp
                console.log(resp)

            }
        })

        setTimeout(function () {
            table.render({
                elem: '#test'
                // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[ //表头
                    {field: 'fwbh', title: '服务编号'}
                    , {field: 'fwmc',height:60, title: '服务名称'}
                    , {field: 'xqmc', title: '小区名称'}
                    , {field: 'ydrs', title: '预定人数'}
                    , {field: 'fwsl', title: '服务类容数量'}
                    , {field: 'kssj', title: '预定开始时间'}
                    , {field: 'jssj', title: '预定结束时间'}
                    , {title: '操作', align: 'center', toolbar:'#barDemo'}
                ]]
                , data: datas
                , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                    layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                    , groups: 3 //只显示 1 个连续页码
                    , first: false //不显示首页
                    , last: false //不显示尾页
                    , limit: 4
                }
                , height: '250'
            });
        }, 100)

    }

    setTimeout(function () {
        //延迟加载
        getAllRoles()
        // window.location.href="servicebook.html"
    }, 100);

    table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据

        var layEvent= obj.event;

        if(layEvent === 'xg'){
            $ ('#myModals').modal ('show');
            let xgfwsl=$("#xgfwsl").val(data.fwsl);
            let xgkssj=$("#xgkssj").val(data.kssj);
            let xgjssj=$("#xgjssj").val(data.jssj);

            $("#xgaddbut").on("click",function (){
                $ ('#myModals').modal ('hide');
                let bh=data.fwbh
                let xgfwsl=$("#xgfwsl").val();
                let xgkssj=$("#xgkssj").val();
                let xgjssj=$("#xgjssj").val();
                fsajax(xgfwsl,xgkssj,xgjssj,bh);
            })


        }else if(layEvent === 'sc'){
            if(data.ydrs>0){
                layer.msg('有人预约不能删除', {icon: 2});
                setTimeout("ff()","1100");
            }else {
                sc(data.fwbh)
            }
        }

    })

});

// 修改方法
function fsajax(xgfwsl,xgkssj,xgjssj,bh){
    $.ajax({
        url:"xiugai",
        type:"post",
        data:{"xgfwsl":xgfwsl,"xgkssj":xgkssj,"xgjssj":xgjssj,"bh":bh},
        success:function(data){

            if(data){

                layer.msg("修改成功", {icon: 6})
                setTimeout("ff()","1100");

            }else {
                layer.msg("修改失败", {icon: 2})
                setTimeout("ff()","1100");

            }
        }
    })
}

//删除方法
function sc(bh){
    $.ajax({
        url:"sjshanchu",
        type:"post",
        data:{"bh":bh},
        success:function(data){
            if(data){
                layer.msg("删除成功", {icon: 6})
                setTimeout("ff()","1100");
            }else {
                layer.msg('预约失败', {icon: 2});
                setTimeout("ff()","1100");
            }
        }

    })

}

// 搜索
$("#ss").on("click",function () {
    let ssinput = $("#ssinput").val();
    layui.use('table', function () {
        var table = layui.table;
        let datas = []

        function getAllRoles() {
            $.ajax({
                url: "getselect",
                data: {"ssinput": ssinput},
                type: "post",
                success: function (resp) {
                    datas = resp
                    console.log(resp)

                }
            })

            setTimeout(function () {
                table.render({
                    elem: '#test'
                    // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[ //表头
                        {field: 'fwbh', title: '服务编号', sort: true, fixed: 'left'}
                        , {field: 'fwmc', title: '服务名称'}
                        , {field: 'xqmc', title: '小区名称'}
                        , {field: 'ydrs', title: '预定人数'}
                        , {field: 'fwsl', title: '服务类容数量'}
                        , {field: 'kssj', title: '预定开始时间'}
                        , {field: 'jssj', title: '预定结束时间'}
                        , {title: '操作', align: 'center',toolbar:'#barDemo'}
                    ]]
                    , data: datas
                    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        , groups: 3 //只显示 1 个连续页码
                        , first: false //不显示首页
                        , last: false //不显示尾页
                        , limit: 4
                    }
                    , height: '250'
                });
            }, 100)

        }

        setTimeout(function () {
            //延迟加载
            getAllRoles()
        }, 100);

    });
});

function  chaxun(bh,fwsl,kssj,jssj){
    let xgfwsl=$("#xgfwsl").val(fwsl);
    let xgkssj=$("#xgkssj").val(kssj);
    let xgjssj=$("#xgjssj").val(jssj);
    $("#xgaddbut").on("click",function (){
        $ ('#myModals').modal ('hide');
        let xgfwsl=$("#xgfwsl").val();
        let xgkssj=$("#xgkssj").val();
        let xgjssj=$("#xgjssj").val();
        fsajax(xgfwsl,xgkssj,xgjssj,bh);
        // window.location.href="servicebook.html";
    })
}
function cxsc(bh){
    layer.msg(bh)
}


$("#ssqb").on("click",function (){
    window.location.href="servicebook.html"
})


</script>
</body>
</html>